/**
 文 件 名：SonComponent
 描    述：相应的父子组件交互的例子(用一句话描述该文件做什么)
 项目名称：reactnative01
 作    者：武汉大学国家网络安全学院@沈家强
 发布日期：2018/05/12 1:08
 文件版本：V1.0
 注意：本内容仅限于武汉大学国家网络安全学院陈刚教授团队内部传阅，禁止外泄以及用于其他的商业目
 @Copyright: 2018 www.whu.edu.cn. All rights reserved.
 All rights Reserved, Designed By www.whu.edu.cn
 **/
import React, {Component} from 'react';

import {
  StyleSheet,
  Text,
  Image,
  Alert,
  View,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

var {height, width} = Dimensions.get('window');

const m_Width = (width/3) - 20;
const m_itemHeight = m_Width / 0.697;

//因为这个组件，不有对应的state的变化，为了性能考虑可以考虑将相应的组件变成对应的函数
// export default class ItemComponent extends Component {
//   render() {
//     const {title, image} = this.props;
//     return (
//         <View style={styles.ItemRoot}>
//           <Image source={{uri: image}} style={styles.ItemImage} />
//           <Text style={styles.ItemImageTitel} numberOfLines={1}>{title}</Text>
//         </View>
//     );
//   }
// }

const renderStartImage = (stars, average) =>{
  let nAllStars = 5
  let nFullStars = 0;
  let nMidStars = 0;
  let nNullStars = 0;

  let strFirstC = stars.toString()[0];
  let strSecodC = stars.toString()[1];
  //如果开始首字母是5，证明是5星，全满，哪么就直接显示全满
  if(strFirstC == "5")
  {
    nFullStars = nAllStars;
  }
  else
  {
    nFullStars = parseInt(strFirstC) -1;
    if(nFullStars < 0)
    {
      nFullStars = 0;
    }
  }
  if(strSecodC =="5")
  {
    nMidStars = 1;
  }
  //计算所有星星的个数
  nNullStars = nAllStars - nMidStars - nFullStars;

  const result = [];
  var nkey = nAllStars;
  for(var i = 0; i < nFullStars; i++)
  {
    nkey = nkey - i;
    result.push(<Image key={nkey} style={styles.ItemStar} source={require("../img/star-full.png")}/>)
  }
  if(nMidStars == 1)
  {
    nkey --;
    result.push(<Image key={nkey} style={styles.ItemStar} source={require("../img/star-half.png")}/>)
  }
  for(var i = 0; i < nNullStars; i++)
  {
    nkey = nkey -1 -i;
    result.push(<Image key={nkey} style={styles.ItemStar} source={require("../img/star-empty.png")}/>)
  }

  //如果全是无星星，显示暂无评份
  if(nNullStars == 5)
  {
    return (
        <View style={styles.ItemStarsWarp}>
          <Text style={styles.ItemAlertText}>暂无评论</Text>
        </View>
    );
  }
  else
  {
    return (
    <View style={styles.ItemStarsWarp}>
      {result}<Text style={styles.ItemStarsText}>  {average}</Text>
    </View>
    );
  }
}

const ItemComponent = (props) =>{
  const {title, image, stars,average, onPress} = props;
  return (
        <TouchableOpacity style={styles.ItemRoot} onPress={onPress}>
          <Image source={{uri: image}} style={styles.ItemImage} />
          <Text style={styles.ItemImageTitel} numberOfLines={1}>{title}</Text>
          {renderStartImage(stars, average)}
        </TouchableOpacity>
    );
}
export default ItemComponent

const styles = StyleSheet.create({
  ItemRoot: {
    paddingTop: 20,
    // marginRight:15,
    marginLeft: 15,
  },
  ItemImage: {
    width: m_Width,
    height: m_itemHeight,
  },
  ItemImageTitel: {
    fontWeight: 'bold',
    fontSize: 20,
    width: m_Width,
    textAlign: 'center',
    paddingTop: 5,
  },
  ItemStar: {
    width:15,
    height:15,
  },
  ItemStarsText:{
    color: 'deeppink',
    fontWeight: 'bold',
  },
  ItemAlertText:{
    color: 'dimgrey',
    fontWeight: 'bold',
  },
  ItemStarsWarp:{
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'center',
  },
});

